.section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

  .aside {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // width:@aside-width;
    user-select: none;

    &-logo {
      width: 45px;
      height: 45px;
      margin: 0 auto;
      background: url(../../images/logo.png) no-repeat center center;
      background-size: 100% auto;
    }

    &-body {
      position: relative;
      width: 100%;
      height: 100%;
    }

    &-tab {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: @header-toolbar-height;
      left: 0;
      bottom: 0;
      z-index: 10000;
      width: @aside-width;
      background-color: #61b3d7;
      background-color: #071e44;
      background-color: #133367;
      // box-shadow:3px 0 5px rgba(0, 0, 0, 0.1);
      // box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
      transition: width 0.3s;
    }

    &-panel {
      flex: 1;
      // position:absolute;
      // top:0;
      // // top:72px;
      // left:0;
      // right:0;
      // bottom:72px;
      // padding: 25px 0;
      overflow: hidden;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 3px;
        height: 6px;
      }

      // &::-webkit-scrollbar-track-piece {
      //   background-color: rgba(0, 0, 0, .25);
      // }

      // &::-webkit-scrollbar-thumb,
      // &::-webkit-scrollbar-thumb:horizontal,
      // &::-webkit-scrollbar-thumb:vertical {
      //   background-color: #076690;
      // }

      // &::-webkit-scrollbar-thumb:hover {
      //   background-color: #666666;
      // }
    }

    &-nav {
      // margin-top: 32px;

      ul {
        margin: 0;
        padding: 0;
      }

      li,
      .nav-button {
        position: relative;
        // margin: 5px 0;
        // padding:0 15px 0 12px;
        // border-left:3px solid transparent;
        // padding:0 12px;
        color: #ffffff;
        transition: color 0.5s;
        cursor: pointer;

        a {
          display: block;
          color: #ffffff;
          text-decoration: none;

          &:hover {
            color: #ffffff;
          }
        }

        .ico-nav,
        .ico-text {
          display: block;
        }

        .ico-nav {
          height: 64px;
          // padding:20px 0;
          // border-bottom:1px solid #2F3E4D;
          text-align: center;
          cursor: pointer;

          i,
          .fa {
            font-size: 18px;
            margin-top: 24px;
            transition: opacity 0.5s, -webkit-transform 0.5s;
            transition: transform 0.5s, opacity 0.5s;
            transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
          }
        }

        .ico-text {
          height: 0;
          margin-top: 3px;
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;

          -webkit-transform: translateY(0);
          transform: translateY(0);
          transition: height 0.5s, -webkit-transform 0.5s;
          transition: height 0.5s, transform 0.5s;
          transition: height 0.5s, transform 0.5s, -webkit-transform 0.5s;
        }

        &:hover,
        &.hover,
        &.@{menu-prefix-cls}-item-selected,
        &.@{popbox-prefix-cls}-open {
          color: #ffffff;
          // background-color: #419dc5;
          // background-color: @blue;

          a {
            color: #ffffff;
          }
        }

        &:hover,
        &.hover,
        &.@{menu-prefix-cls}-item-selected {
          .ico-nav i,
          .ico-nav .fa,
          .ico-text {
            transform: translateY(-9px);
          }

          .ico-text {
            height: auto;
          }
        }

        &.hover,
        &.@{menu-prefix-cls}-item-selected {
          // border-color:#D75B5D;

          &:before {
            content: '\20';
            position: absolute;
            right: 0;
            top: 50%;
            width: 0;
            height: 0;
            margin-top: -6px;
            border-top: 6px solid transparent;
            border-right: 6px solid #ffffff;
            border-bottom: 6px solid transparent;
          }
        }
      }
    }

    &-footer {
      // position:absolute;
      // left:0;
      // right:0;
      // bottom:0;
      margin-top: 0;
      // background-color: #61b3d7;
      // background-color: #344762;

      li {
        .ico-nav {
          // border-top:1px solid #6C6C6E;
          border-bottom: none;
        }

        &:first-child .ico-nav {
          border-top: none;
        }
      }
    }
  }

  // &.fixed .aside-tab,
  // .aside-tab:hover {
  //   width: @fixed-width;
  //   .@{menu-prefix-cls} {
  //     em {
  //       width: auto;
  //     }
  //     &-submenu {
  //       .@{menu-prefix-cls}-item {
  //         padding-left: 24px !important;
  //       }
  //       &-inline {
  //         > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
  //           right: 16px;
  //         }
  //       }
  //     }
  //   }
  // }
  // &.fixed .primary {
  //   left: @fixed-width;
  // }

  .primary {
    position: absolute;
    top: @header-toolbar-height;
    left: @aside-width;
    right: 0;
    bottom: 0;
    transition: left 0.3s;
  }
}
.@{menu-prefix-cls} {
  &-hidden {
    display: none;
  }
  &-nav {
    .fa {
      // width: 24px;
      margin-right: 7px;
      // vertical-align: middle;
    }
    em {
      font-style: normal;
    }
  }
}
.aside {
  .@{menu-prefix-cls} {
    &-submenu-title,
    &-item {
      position: relative;
      padding: 0 !important;
      border-bottom: 1px solid #223147;
      border-color: #314a6f;
      border-left: 2px solid transparent;
      color: hsla(0, 0%, 100%, 0.8);
      // background-color: #071e44;

      white-space: nowrap;
      em {
        overflow: hidden;
        display: inline-block;
        width: 0;
        vertical-align: middle;
        transition: all 0.3s;
      }
      &:hover {
        // border-left-color: #ff7c35;
      }
    }
    &-submenu-selected .@{menu-prefix-cls}-submenu-title,
    &-item-selected {
      border-left-color: @blue;
    }
  }
}

// .x-loading {
//   &-nested-loading {
//     position: relative;
//   }
// }

.x-fixed {
  .x-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background-color: rgba(255, 255, 255, 0.3);

    &-nested-loading,
    &-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}

.x-container {
  .x-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background-color: rgba(255, 255, 255, 0.3);
  }
  .@{list-prefix-cls}-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .@{list-prefix-cls} {
    // position: absolute;
    // top: 0;
    // left: 0;
    // right: 0;
    // bottom: 0;

    &-pagination {
      // position: absolute;
      // right: 0;
      // bottom: 0;
      position: fixed;
      right: @x-padding;
      bottom: @x-padding;
      z-index: 1;
    }
    &-placeholder {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}

.x-layout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .side,
  .x-side {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .main,
  .x-main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .x-loading {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
  
  @tools-offset: 12px;
  .side {
    width: @side-width;
    .x-tools {
      position: absolute;
      top: unit(unit(@tools-offset) + unit(@x-padding), px);
      right: @tools-offset;
      z-index: 100;
      
      .ico-btn {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        padding: 0;
        border-radius: 3px;
        border: none;
        outline: 0;
        text-align: center;
        vertical-align: top;
        line-height: 20px;
        color: #666;
        background: none;
        cursor: pointer;

        &:hover {
          color: #d75b5d;
          background: #ececec;
        }
        &[disabled], &[disabled]:hover {
          color: #999;
          background: none;
          cursor: default;
        }
      }
    }
    
    @query-height: 48px;
    .x-query {
      position: absolute;
      top: @x-padding;
      left: @x-padding;
      right: 0;
      
      + .x-tools {
        top: unit(unit(@tools-offset) + unit(@x-padding) + unit(@query-height), px);
      }
      + .x-box,
      + .x-tools + .x-box {
        top: unit(unit(@x-padding) + unit(@query-height), px);
      }
    }
    .x-box {
      position: absolute;
      top: @x-padding;
      left: @x-padding;
      right: 0;
      bottom: @x-padding;
      padding: 15px 12px;
      .overflow(15px);
      border: 1px dotted #e4eaf4;
      background-color: #f3f7ff;
    }
  }
  .x-side {
    width: @x-side-width;
    // border-top:2px solid #26ADCC;
    // border-top: 1px solid #ff7c35;
    // border-right: 1px solid #dedede;
    // background-color:#FFFFFF;
    // box-shadow:0 0 10px rgba(0, 0, 0, .1);
  }
  .main {
    left: @side-width;
  }
  .x-main {
    left: @x-side-width;
  }
}

.hello-view {
  display:table;
  width:100%;
  height:100%;

  .hello-message {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    font-size:16px;

    h2 {
      font-size:24px;
      color:@blue;
    }
    .hello-title {
      margin-top:@x-margin;
      font-size:20px;
    }
    p {
      margin-top:@x-margin;
    }
  }
}

.x-query {
  margin-bottom: 12px;
  .ant-select {
    width: 100%;
  }
  &.fixed {
    position: absolute;
    right: @x-padding;
  }
}